Los diferentes menús que podemos aplicar a nuestro blog nos hace a veces estar indecisos a la hora de decidirnos.
Guti lo tiene muy claro, quiere un menú que ocupe poco espacio y ha visto uno en Dynamicdrive que le ha gustado.
Se trata de un menú lateral, queda oculto excepto una pestaña que al pasar el ratón sobre ella hace posible visionarlo al completo.
En estas imágenes se puede apreciar el efecto:




Para instalar el menú hay que descargar el archivo zip que Dynamicdrive proporciona.
El zip consta de dos archivos ssm.js y ssmItems.js lo que no, nos indica es dónde y cómo añadirlo a la plantilla así que vamos a ello.
Alojaremos en un servidor el archivo ssm.js una vez tengamos la url del archivo nos dirigimos a nuestra plantilla y justo antes de </head> añadimos lo siguiente:
<script src='url-del-archivo-ssm.js' type='text/javascript'/>

Luego abriremos el bloc de notas y buscaremos el archivo ssmItems.js que es el donde vamos a personalizar el menú.
Es ahí donde podemos sustituir a nuestro gusto los colores para personalizarlo y por supuesto el texto y los enlaces.
Una vez lo tengamos modificado guardamos de nuevo el archivo y lo alojamos en un servidor.
En la plantilla nos situamos en el lugar donde agregamos el archivo ssm.js y justo después agregamos el siguiente:
<script src='url-del-archivo-ssmItems.js'type='text/javascript'/>

Ya solo queda el último paso nos situamos antes de ]]></b:skin> para añadir lo siguiente:

.ssmItems:link {color:black;text-decoration:none;}
.ssmItems:hover {color:black;text-decoration:none;}
.ssmItems:active {color:black;text-decoration:none;}
.ssmItems:visited {color:black;text-decoration:none;}


Ya podemos mirar en vista previa antes de guardar los cambios.
Anónimo

Hola Gema, soy Guti, como se aloja en un servidor el archivo ssms.js una vez descargado en zip, para obtener la -URL-

Responder
Anónimo

Hola Gema! andaba trasteando por tu blog, pero solo encontre una referencia leve a lo que busco... bueno, que no lo encuentro por ningun lado, vaya, se trata de cómo poner lo de "entradas relacionadas" al final de las entradas, o "entradas con esta etiqueta", ¿sabes cómo hacerlo, o alguien sabe? Muchisimas gracias, y ¡¡¡sigue asi!!!

Responder
Gem@

Hola Guti, como verás esta entrada la hice pensado en ti, como ya era bastante tarde dejé para hoy avisarte en un email pero veo que te adelantaste :)
Alojar un archivo es muy sencillo, yo suelo usar Google Pages hice una entrada en su día aportando un enlace donde hay un tutorial creado por Vagabundia.
(Recuerda que antes de alojar el archivo debes buscarlo en el blog de notas y modificarlo a tu gusto)

Hola Vanessa me alegra mucho verte :)
Me parece a mi que tu plantilla es de las clásicas de lo contrario ese cartelito para mostrar todas las entradas con la misma etiqueta aparecería por defecto en tu blog.
Hice una entrada informando de como suprimir ese cartelito lo que desconozco es como agregarlo a una plantilla clásica.
Si estoy confundida y por el contrario tu plantilla es de las llamadas beta puedes probar a buscar la parte de código de esta imagen y añadir lo que está en azul (siempre mirando en vista previa antes de guardar los cambios)

Normalmente al final de cada entrada aparecen las entradas relacionadas siempre y cuando tu añadas enlaces con otra página de tu blog o alguien escriba enlazando esa entrada.

Responder
Anónimo

Hola Gema! paso por aqui todos los dias, que sepas que vigilo TODO lo que haces... de verdad, y en el buen sentido ;) De hecho, eres la principal "culpable" de que mi blog sea tan recargado, ¡lo pruebo casi todo, me gusta y ahi queda! Bueno, el tema es que no me aparecen de ninguna manera las etiquetas, en el modo de edición de entradas (en la plantilla) lo tengo bien configurado para que aparezcan pero... no sé qué pasa. Mi plantilla era la minima black, pero después de hacerle tantas cosas, es una mutación, y lo más problable es que me haya quedado alguna parte de algún código que puse y no quité bien, y que impide que aparezcan.
Me parece que lo voy a poner a mano. Es que me empeño. En fin, muchas gracias, ya te contaré, un saludo caluroso!

Responder
mas de mi que de... lirio

Probando, probando…
espero haber resuelto el problema.. Besos y gracias por tu aviso y tu ayuda.

Responder
mas de mi que de... lirio

es obvio que no. jejeje
besos

Responder
Gem@

Hola Vanessa es probable que modificando algo suprimieras parte importante de las etiquetas, pero yo creo que te habría dado algún error al hacerlo.
Si no te he entendido mal te refieres a las etiquetas que aparecen debajo de cada post.
Prueba lo siguiente:
Accede a Creación de entradas/Editar entradas
Verás un despegable que dice Acciones de las etiquetas clica ahí y ve a nueva etiqueta debes ir creando las etiquetas de una en una.
Luego ve editando las entradas de una en una y en la parte de abajo donde dice:Mostrar todo te aparecerán las etiquetas que deberás clicar para que aparezcan en la entrada. Guardas los cambios y listo.
Ojalá te resulte bien de esta manera ;)

Responder
Gem@

mas de mi que de... lirio
Al principio no, pero ahora parece que si... :)

Responder
Radix

Hola...
Bueno dejo mis saludos.. buen blog, muy interesante, pasare mas seguido.
Saludos!

Responder
Gem@

Radix gracias por comentar.
Bienvenido ;)

Responder
Gerardo

Hola Gema, he estado dandome ua vuelta por tu blog. He aprendido y aplicado muchas de las cosas que he visto. He tenido un problema con lo del menu slidebar. Me da el siguiente error:The element type "head" must be terminated by the matching end-tag. Si puedes, dime algo.Muchas gracias

Responder
Gem@

Hola Gerardo, lo único que me viene a la mente es que mires si añadiste el script para el archivo ssm.js justo después de <head>.
Hay otra cosa que suele ocurrir cuando copiamos y pegamos un código en la plantilla y es que las dos comillas -> " a veces producen errores.
Prueba a sustituir las dos comillas " por una '

Responder
Asuknamun

Hola Gema, siempre he revisado tu blog y el de Rosa, para desarrollar mi blog, pero conforme pasa el tiempo, por obvias razones encuentro menos utilidades que antes, pero hay una que machaca en mi cabeza y es la de las entradas relacionadas para blogger, si sabes de alguna forma, o la manera exacta te agradecería hasta con una entrada exclusiva en mi blog :=)

Saludos

Responder
Gem@

Saludos Asuknamun es obvio que conforme pase el tiempo las utilidades que hay en curso ya las tengas muy vistas, sería bueno que no dieras una idea sobre lo que te gustaría encontrar.
Tendré en cuenta lo de las entradas relacionadas para la próxima entrada ;)

Responder
Anónimo

Hola Gema
Intenté alojar el archivo zip en google page ,pero no sale ninguna dirección url.
¿Qué hago?

Responder
Gem@

No hay que alojar el zip. Lo que hacemos es extraer los dos archivos del zip el archivo ssm.js y ssmItems.js

El primero que alojaremos será el ssm.js. Luego... en el bloc de notas buscaremos el archivo ssmItems.js y lo modificaremos para personalizarlo.
Una vez los cambios realizados guardamos otra vez y ya podemos alojarlo en GooglePages para conseguir la url y agregarla a la plantilla igual que con el archivo
ssm.js

Responder
Anónimo

No entiendo muy bien, cómo extraigo los archivos?

Responder
Sib

Lo Logramos Gema¡¡¡
Adios cartelito hasta otra... le he dado vueltas con tus explicaciones a toda la plantilla y después de volverme casi loca era un párrafo del código que faltaba cerrarlo, que en tus explicaciones no está cerrado
Todo llega y más si se trabaja en equipo...
Gracias guapa
Besos

Responder
Gem@

Anónimo si usas Firefox lo tienes muy fácil, descargas el zip, lo abres y arrastras el los archivos de uno en uno hasta tu escritorio.
Luego en Google Pages cuando los buscas para subirlo debes hacerlo en escritorio ;)


SIB PUES pues no sé que código queda por cerrar porque para guiarte añadí ese efecto en mi blog de pruebas copiando el de la entrada que te mandé y funciona perfectamente.
De todas formas el resultado es lo que cuenta. !!Me alegra mucho¡¡ ;)

Responder
Anónimo

Ya los he alojado en el servidor,pero cómo se hace para ver la URL de los archivos?

Responder
Anónimo

Ya entendí como sacar la URL,pero tengo otro problema. El segundo archivo (el que tenemos que modificar),no lo puedo abrir.Vi que tu lo has subido para ver más o menos cómo era.
Podría copiarlo al bloc de notas ,modificarlo ahí y este subirlo a google pages?¿saldrá los mismo?

Responder
Gem@

Es mucho más sencillo de lo que parece anónimo.
Debes buscar el bloc de notas, lo puedes encontrar clicando en INICIO de tu PC una vez lo abres debes clicar en ARCHIVO y luego en ABRIR.
Localizas el archivo ssmItems.js y ahí mismo es donde debes modificarlo. Una vez lo modificas guardas los cambios y ese archivo ya está listo para alojar en tu servidor.

Responder
Anónimo

Hola Gema :)
Necesito tu ayuda con respecto a lo siguiente: tengo el menu debajo del banner (top) como puedo colocarlo en la parte superior?

Responder
Gem@

Sidhe and para eso debes modificar el archivo ssmItems.jsy probar modificando en hdrHeight="15";

Responder
Anónimo

Gema, no puedo encontrar esos caracteres :( ¿Tienen que salir en todas las plantillas?
Saludos!

Responder
Gem@

¿Qué caracteres Sidhe?

Responder
Anónimo

Estos Gema: ssmItems.js y hdrHeight="15";
Se me hizo un lio :)
Graacias

Responder
Gem@

Sidhe creo que si que te liaste un poco ¿por qué no me mandas una captura del problema que tienes? quiero decir que me digas el lugar exacto donde está el menú y donde deseas que esté. Es que no he podido acceder a tu blog y verlo :(

Responder
Anónimo

Okis, mira aquí te dejo una imagen. Como verás el menú esta en la parte inferior, yo lo quiero poner en la parte superior.
Gracias
PD: lo que pasa es que todavía no lo hemos dado a conocer :P

Menú

Responder
Gem@

Veamos Sidhe, tu lo que tienes es un menú horizontal debajo del logo y las explicaciones de esta entrada son para un menú lateral como el de las imágenes de ejemplo de la entrada.
Por eso siempre pido ver el blog porque os puedo dar unas explicaciones que no son las adecuadas :(

Ve a plantilla de diseño, y la etiqueta del elemento de página que contiene el menú la arrastras hasta encima del logo.
Si no te deja es porque no tienes espacio y debes añadirlo. Puedes hacerlo siguiendo estos pasos, donde dice "widget en el header"
De esta forma el menú estará sobre el logo :)

Responder
Anónimo

Gema, perdón por el despiste!
Siguendo los pasos, no encontre "header", mi plantilla no viene con un widget para poner la imagen en la cabecera, no sé que puedo hacer en este caso, pero si pude colocar un widget en el footer :)
Ahora si puedes ver el blog. Una cosa la parte del menú ¿se puede hacer más angosta, no del tamaño de la imagen?

Gracias por tu ayuda

Responder
Gem@

El menú es una imagen para reducir esa imagen (hacerla más estrecha) tendrías que reducirla con algún editor de imágenes, si no te refieres a la imagen explícame un poco más que deseas hacer.

Responder
Anónimo

Mira para reducirla le agregue esto al menu:
margin-left:120px;
margin-right:400px;

Y me quedo más estrecha, no sé lo si lo que hice estará bien, si puedes echale una pasada al blog para ver los resultados.
Thanks :)

Responder
Anónimo

Tipo de elemento "script" debe ser seguida por cualquiera de las especificaciones de atributo, ">" o "/>".

ese es el error que me arroja ..

alguna solucion?

Responder
Gem@

Está perfecto Sidhe, le añadiste justo la medida del main :)

Anónimo ¿te refieres al menú de esta entrada?

Responder
Anónimo

Gema, probando este menú.. me aparece que el script debe estar acompañado por ">" o "/>".. una vez pincho para ver el blog en vista previa.

Al parecer es lo mismo que le sucede a Anónimo.

Si me pudieras explicar que pasa te estaría muy agradecida.

Saludos
Bye

Responder
Diego

Hola Gema,bueno hace demasiado tiempo encuentro ayuda en tu blog, es excelente realmente sabes mucho de esto, lo que no comprendo es porqué no lo explotas con adsense u otros servicios de publicidad para conseguir $ extra ya que con tu Pagerank seguramente ganarás algo,simplemente eso resulta envidiable tu posicionamiento en buscadores cuando se consulta por blogger pero a su vez como te decia no entiendo eso, bueno saludos desde Montevideo-Uruguay.
Diego

Responder
Gem@

Sidhe el script es el que proporciona dynamicdrive.com a mi no me ha creado problemas para el ejemplo, podrías probar a añadirlo en otra plantilla (de pruebas por ejemplo) y me dices si siguen esos problemas.
Esto vale también para anónimo ;)

Hola Diego no es la primera vez que me lo sugieren, a todos nos gustaría ganar un dinerillo extra pero hay dos cosas que me "frenan" a utilizar publicidad.
Por una parte es que para que la publicidad de buen resultado hay que incluirla en lugar bien visible eso en mi opinión afecta mucho la estética del blog (es mi opinión solamente eh) por otra parte está un dato que muchos desconocen y es que las ganancias no son tanto como se piensa, ya que Adsense por ejemplo no paga por clic realizado sino por el segundo clic pero no un segundo clic en la publicidad sino que la misma visita debe hacer clic en la publicidad del blog y luego otro clic en la página donde le ha llevado la publicidad.
No digo con eso que no esté de acuerdo sobre que otros añadan publicidad porque hoy pienso así y mañana me decanto por otra cosa pero considerando todo eso llego a la conclusión que no vale la pena llenar el blog con publicidad que muy poco puede reportar.
Te agradezco el interés y el tiempo que dedicaste a este comentario :)

Responder
Rubén Bodewig

Hola Gema, este menú es genial, pero estoy intentando meterle carácteres españoles (eñes, acentos...) y no me deja. he probado a cambiar por ejemplo, una "í" por "&iacute" (siguiendo estos códigos http://www.ascii.cl/es/codigos-html.htm) pero o no se hacerlo o no funciona.

Sabes si hay solución?
gracias!

Responder
Rubén Bodewig

En esta página hay otro modelo, http://www.actuario.es/amguardamar

quizá te parezca interesante porque al no ser desplegable es más ágil y ligero. Si te animas a destriparlo para que podamos usarlo, yo me apunto al club de hacerte un monumento!

Responder
Gem@

Ve buscando un sitio bonito para ese monumento jajajaja ahora en serio ese menú es de los más sencillos que puedas encontrar, voy a aplicarlo a mi blog de pruebas y mostrártelo.

Aunque debo reconocer que el que añadiste te ha quedado de lujo ;)

Responder
Gem@

De nuevo aquí Rubén, el menún no es el mismo que conste, el de esa página está creado con script lo que a simple vista son imágenes de botones en realidad o lo son :O
Así que lo que hice fue crear un menú lateral con CSS, efecto hover y unas imágenes tipo tabs que pueden hacerse de cualquier otro color.
El único inconveniente es que yo he tenido que añadir el texto sobre el botón (no domino demasiado bien los programitas así que lo hice sobre la marcha en un generador online.
En una palabra los botones hay que crearlos :)
Ya, ya... no hay monumento entonces jajajaja lo dejaremos en el proyecto :)
menú
Avísame cuando lo veas, ese blog es mi rompecabezas :)

Responder
Patán

ese tipo de menu me gusta más que todos los que he visto...veremos que plicacion le podemos dar a mi blog.........

Responder
Rubén Bodewig

Hola gema muchas gracias! me he apuntado el código, porque según los usuarios vayan viendo si les ralentiza mucho, lo cambiaré por este que has hecho o lo dejaré tal como está.
A ver si me aclaro, has introducido los estilos antes de /head y luego los enlaces del "menutabs" los has especificado después de /head. sólo tiene eso?
qué sencillito sabes hacer lo que para mí es tan complicado!! graciaaaaaaaaaaaaaaaas!

Responder
Gem@

Me alegra que te guste Patrico :)

Rubén los estilos deben ir siempre antes de ]]></b:skin> y los enlaces normalmente los añadimos com un elemento de página html.... pero yo los añadí en la plantilla justo después de:
<div id='outer-wrapper'><div id='wrap2'>
Para poder ubicar el menú lo más alto posible.
Si quieres mándame un mail y te mando el código listo para copiar y pegar ;)

Responder
Rubén Bodewig

de momento no te preocupes, no te quiero dar más trabajo... tengo una buena lista de dudas para ir preguntándote, pero voy dosificándolas para no agobiarte.
Este menú que he puesto es más útil y le está gustando a los lectores.

Por cierto, he dado con este javascript para usar tus propias fuentes fuera de las convencionales sin emplear flash: http://blog.makezine.com/archive/2008/11/typefacejs_embedded_html.html?CMP=OTC-0D6B48984890

por si te interesa!!
PD: estoy montandome mi página 404, voy a dejar esto como los chorros!!

Responder
Gem@

Opino lo mismo Rubén es mucho más práctico y en mi opinión elegante.
Gracias por ese enlace voy a guardarlo ;)
¿como los chorros? yo diría que muy profesional :)

Responder
Patán

Gem@...

encontré un pequeño detalle.

El Código ahy que pegarlo antes de </head>, el qu debe ser como lo adjunto.

<style type="text/css">

<!--

A.ssmItems:link {color:black;text-decoration:none;}

A.ssmItems:hover {color:black;text-decoration:none;}

A.ssmItems:active {color:black;text-decoration:none;}

A.ssmItems:visited {color:black;text-decoration:none;}

//-->

</style>



<SCRIPT SRC="url-del-archivo-ssm.js" language="JavaScript1.2">



//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)

//Updated July 8th, 03' for doctype bug

//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com



</SCRIPT>



<SCRIPT SRC="url-del-archivo-ssmItems.js" language="JavaScript1.2"></SCRIPT>

Donde dice la Url del archivo, debe ser el mismo de os antes indicados.

Saludos.

Responder
Gem@

Rectifiqué eso Patricio y lo expliqué ahora mucho más claro creo...
Gracias por el detalle amigo ;)

Responder
Patán

Que bueno amiga......yo en estos día lo aplico en mi blog....

Saludos y Feliz Año nuevo.

Responder
Gem@

Feliz año nuevo Patricio :)

Responder
Estefanía Recio

Hola Gema! Muy buen blog.
Mi problema es que encontré una plantilla que me encantó y estoy modificándola y tal...
Pero el menú está situado abajo... Y no sé cómo desplazarlo a un lateral (ya sea izquierda o derecha) :S
A ver si puedes ayudarme...
Te dejo la dirección...
solodeprimavera.blogspot.com

Responder
Gem@

Saludos ERecioG, esa plantilla de Zona Cerebral es muy elegante.
Verás, puedes intentar ubicar si modificas donde dice:padding:2px 0 4px 0px; aumenta por ejemplo a padding:2px 0 4px 100px;
Mira siempre en vista previa ;)

Responder
Estefanía Recio

Gracias por contestar!
Pero lo que quiero no es desplazar hacia la izq o derecha dejándo el menú debajo del cuerpo... Sino, subirlo a la altura del primer post, a un lado.
Como un menú lateral...
Gracias! :D

Responder
Gem@

Entendí que deseabas desplazarlo a un lateral :O
Mira este ejemplo de como añadir un menú en cualquier parte..
La diferencia está que en lugar de añadirlo en <div id='header-wrapper'> lo puedes añadir justo antes de <div id='main-wrapper'>
En la css deberás dejar solamente lo relacionado al color de fuente, tamaño ... y eliminar padding y margin.

.menu ul{
background:#fff;
line-height:10px;
}
.menu ul li{
display:inline;
text-transform:uppercase;
font-weight:bold;
}

Responder
Gem@

Omite el último paso de los estilos e intenta añadir el menú que añadiremos los estilos en el mismo menú.

Responder
Unknown

gracias gem@, tus consejos son buenisimos, gracias de verdad!!!

Responder
Gem@

yz Gracias a ti por comentar Alexnex :)

Responder
alis

:´( NOSE QUE PASA PERO ME SALE ERROR EN LA PLANTILLA DICE Q EL BLOQUE ESTA MAL CERRADO Y QUE VERIFIQUE EL ´> OR ´/> QUE HAGO QUE PASA

Responder
Gem@

:: alis mira que no tengas ninguna etiqueta mal cerrada como esta />

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top